<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>json工具-v2.1.2</title>
  <link rel="icon" type="image/x-icon" href="img/favicon.ico">
  <!-- import CSS -->
  <link rel="stylesheet" href="css/element.css">
  <link rel="stylesheet" href="css/str-util.css">
</head>
<body>
<div id="app">
  <!-- 操作目录 -->
  <div class="menu">
    <!-- 循环行 -->
    <el-row v-for="(item_1, index_1) in actionData" :key="index_1" style="padding-top: 4px">
      <!-- 循环分组-->
      <span v-for="(item_2, index_2) in item_1" :key="index_2"
            :class="'part ' + (item_2.class ? item_2.class:'light-blue-green')">
        <!-- 名称 -->
        <span v-html="item_2.name"></span>
        <el-tooltip v-for="(item, index) in item_2.arr" :key="index" :content="item.desc" open-delay="300"
                    placement="bottom" effect="light" hide-after="2000">
          <el-button :key="index" :type="item.type"
                     @click="handleButtonClick(item.fun, item.copyOutputStr)"
                     size="mini" plain>
            {{item.txt}}
          </el-button>
        </el-tooltip>
      </span>
    </el-row>

    <el-row v-if="hideBtnArr.length !== 0" style="padding-top: 4px">
      <span v-if="hiddenFlag">
        <!-- 循环分组-->
        <span v-for="(item_2, index_2) in hideBtnArr" :key="index_2"
              :class="'part ' + (item_2.class ? item_2.class:'light-blue-green')">
          <!-- 名称 -->
          <span v-html="item_2.name"></span>
          <el-tooltip v-for="(item, index) in item_2.arr" :key="index" :content="item.desc" open-delay="300"
                      placement="bottom" effect="light" hide-after="2000">
            <el-button :key="index" :type="item.type"
                       @click="handleButtonClick(item.fun, item.copyOutputStr)"
                       size="mini" plain>
              {{item.txt}}
            </el-button>
          </el-tooltip>
        </span>
      </span>
      <el-button @click="hiddenFlag = !hiddenFlag" size="mini" plain type="text">
        {{hiddenFlag ? '隐藏隐藏按钮' : '显示隐藏按钮'}}
      </el-button>
    </el-row>

    <!-- 设置按钮目录 -->
    <div class="setting-start">
      <el-dropdown @command="dropdownHandel">
        <span class="el-dropdown-link">
          <i class="el-icon-s-tools"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-tooltip v-for="item in settingArr" :key="item.command" :content="item.desc" placement="left">
            <el-dropdown-item :command="item.command">
              {{ item.label }}
            </el-dropdown-item>
          </el-tooltip>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>

  <!-- 显示 -->
  <div class="main">

    <!-- 左侧输入 -->
    <div :class="leftClass">
      <el-row>
        输入及操作：
        <el-button type="text" plain size="mini" @click="copyInput()" icon="el-icon-document-copy"></el-button>
        <el-button @click="dataChange()" plain size="mini">{{ inputType === 'str' ? '转obj' : '转str' }}</el-button>

        <el-button @click="jsonNameDialog = true" plain size="mini">保存</el-button>
        <span v-if="inputType === 'str'">
          <el-button size="mini" @click="strFormat()">格式化</el-button>
          <el-button size="mini" @click="inputStr = ''">初始化str</el-button>
          <el-button size="mini" @click="inputStr = '{}'">初始化obj</el-button>
        </span>
        <span v-else>
          <el-button @click="setJsonDisplay()" size="mini">
            {{childrenJsonDisplay ? '全收起' : '全展开'}}
          </el-button>
        </span>

        <!-- 保存 读取数据 -->
        <el-select v-model="thisDataObj" size="mini" @change="thisDataChange" v-if="saveData.length > 0"
                   style="width: 150px;color: black" filterable placeholder="请选择记录数据" default-first-option
                   value-key="name">
          <el-option v-for="item in saveData" :value="item" :key="item.name" :label="item.name"></el-option>
        </el-select>

        <el-tooltip content="删除当前输入数据" v-if="saveData.includes(thisDataObj)">
          <el-button size="mini" @click="deleteData()" icon="el-icon-delete" type="text" style="color: red"></el-button>
        </el-tooltip>

        <el-tooltip content="导出当前输入数据" v-if="saveData.length > 0">
          <el-button @click="exportData" type="text" icon="el-icon-download" size="mini">
          </el-button>
        </el-tooltip>
        <el-tooltip content="导入数据">
          <el-button @click="importData" type="text" icon="el-icon-upload" size="mini">
          </el-button>
        </el-tooltip>

        <el-tooltip :content="displayRight ? '隐藏结果': '显示结果'">
          <el-button @click="rightDisplay()" size="mini">
            {{displayRight ? '隐藏' : '显示'}}
          </el-button>
        </el-tooltip>
      </el-row>

      <!-- 输入显示 -->
      <div class="input-div">
        <!-- 输入行显示 -->
        <div class="editor-container" v-if="inputType === 'str'">
          <div class="line-numbers" ref="lineNumbers"></div>
          <textarea v-model="inputStr" :class="inputClass" :rows="lines+1"></textarea>
        </div>
        <!-- 输入json -->
        <json-input ref="child" v-model="inputObj" v-else/>
      </div>
    </div>

    <!-- 右侧结果 -->
    <div :class="rightClass">
      <el-row>
        结果及操作：
        <el-button type="text" plain size="mini" @click="copyTextIn(outputStr)"
                   icon="el-icon-document-copy"></el-button>
        <el-tooltip content="隐藏结果">
          <el-button @click="rightDisplay()" size="mini">
            隐藏
          </el-button>
        </el-tooltip>

        <!-- 示例数据 -->
        <span style="padding-left: 4px">  示例:</span>
        <el-select v-model="caseObj" @change="caseChange" size="mini" filterable default-first-option
                   style="width: 150px; margin-left: 6px" value-key="name" @visible-change="caseChange">
          <el-option v-for="item in caseData" :value="item" :key="item.name" :label="item.name"></el-option>
        </el-select>
      </el-row>

      <!-- 结果显示 -->
      <div class="output-div">
        <div class="editor-container">
          <div class="line-numbers" ref="lineNumbersOut"></div>
          <textarea v-model="outputStr" class="input" :rows="linesOut+1"></textarea>
        </div>
      </div>
    </div>

    <a class="github-desc" target="_blank" href="https://gitee.com/luduanxu/string_util">
      开源项目地址（点我）
    </a>
  </div>

  <!-- 保存数据 -->
  <el-dialog title="保存数据" :visible.sync="jsonNameDialog" width="340px" top="40px" draggable>
    保存输入、输出数据（与原有数据名称相同时，会覆盖原有数据）
    <el-input v-model="jsonName" placeholder="请输入数据名称" style="width: 300px; margin-top: 10px"></el-input>
    覆盖原有数据：
    <el-select v-model="jsonName" v-if="saveData.length > 0"
               style="width: 150px;color: black" filterable placeholder="请选择原数据名称" default-first-option
               value-key="name" style="width: 300px;margin-top: 2px">
      <el-option v-for="item in saveData" :value="item.name" :key="item.name" :label="item.name"></el-option>
    </el-select>
    <span slot="footer" class="dialog-footer">
      <el-button @click="jsonNameDialog = false">取 消</el-button>
      <el-button type="primary" @click="saveDataDo">确 定</el-button>
    </span>
  </el-dialog>

  <!-- 导入 输入输出数据 -->
  <el-dialog title="导入输入&结果数据" :visible.sync="uploadFlag" width="600px" top="40px" draggable>
    <el-upload class="upload-demo" drag action="https://test" accept=".json" :auto-upload="false" :limit="1"
               :on-exceed="handleExceed" ref="uploadInputOutputRef" :on-change="uploadChange">
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <div class="el-upload__tip" slot="tip">只能上传json文件，且不超过500kb</div>
    </el-upload>
    <span slot="footer" class="dialog-footer">
      <el-button @click="uploadFlag = false">取 消</el-button>
      <el-button type="primary" @click="uploadInputOutput">确 定</el-button>
    </span>
  </el-dialog>

  <!-- 页面 按钮设置弹窗 -->
  <el-dialog title="设置数据" :visible.sync="updateFlag" width="540px" top="40px" fullscreen draggable>
    <el-input placeholder="输入关键字进行过滤" v-model="filterActionText" size="mini" clearable>
    </el-input>
    <div style="min-height: 400px; max-height: calc(80vh - 140px); overflow-y: auto;">
      <el-tree :data="updateActionArr" node-key="id" default-expand-all ref="treeActionSetting" draggable
               :allow-drop="updateAllowDrop" :expand-on-click-node="false" :filter-node-method="filterActionNode">
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span :class="data.class" v-if="data.type !== 'btn'" v-html="data.label"></span>
          <el-tooltip :content="data.data.desc" open-delay="300" placement="bottom" effect="light"
                      v-if="data.type === 'btn'" hide-after="2000">
            <el-button :key="data.id" :type="data.btnCls" size="mini" plain>
              {{data.label}}
            </el-button>
          </el-tooltip>

        <span>
          <!-- 操作 -->
          <el-tooltip content="按钮设置是否显示，显示的是当前状态">
            <el-button :type="data.display?'primary':'info'" size="mini" plain
                       @click="data.display = !data.display">
              {{data.display ? '显示' : '隐藏'}}
            </el-button>
          </el-tooltip>
          <el-tooltip content="增加子类型" v-if="data.type !== 'btn'">
            <el-button type="text" size="mini" @click="btnAddStart(data)" icon="el-icon-plus"></el-button>
          </el-tooltip>
          <el-tooltip content="修改数据" v-if="data.type !== 'row'">
            <el-button type="text" size="mini" @click="btnUpdateStart(data)" icon="el-icon-edit-outline"></el-button>
          </el-tooltip>
          <el-button type="text" size="mini" @click="() => remove(node, data)" icon="el-icon-delete" style="color: red">
          </el-button>
        </span>
      </span>
      </el-tree>
    </div>

    <span slot="footer" class="dialog-footer">
      <el-button @click="updateFlag = false">取 消</el-button>
      <el-button type="primary" @click="updateDo">确 定</el-button>
    </span>
  </el-dialog>

  <!-- 修改按钮及分组 -->
  <el-dialog :title="btnUpdateTitle" :visible.sync="btnUpdateFlag" width="600px" top="40px" draggable>
    <!-- 分组 -->
    <el-form v-if="btnUpdateData.type === 'class'" ref="classUpdateRef" :model="btnUpdateData" label-width="80px">
      <el-form-item label="名称">
        <el-input v-model="btnUpdateData.label" placeholder="请输入名称"></el-input>
      </el-form-item>

      <el-form-item label="样式">
        <el-select v-model="btnUpdateData.class" placeholder="请选择样式">
          <el-option v-for="item in partColorClass" :value="item" :key="item"
                     :label="item"><span
                  :class="item">样式：{{item}}{{item==='light-blue-green'?'（同背景色）' : ''}}</span></el-option>
        </el-select>
        <span :class="btnUpdateData.class">{{btnUpdateData.class==='light-blue-green'?'样式（同背景色）' : '样式'}}</span>
      </el-form-item>

      <el-form-item label="是否显示">
        <el-radio-group v-model="btnUpdateData.display">
          <el-radio-button :label="true" :key="true">显示</el-radio-button>
          <el-radio-button :label="false" :key="false">隐藏</el-radio-button>
        </el-radio-group>
      </el-form-item>
    </el-form>

    <!-- 按钮 -->
    <el-form v-if="btnUpdateData.type === 'btn'" ref="btnUpdateRef" :model="btnUpdateData"  top="40px" label-width="80px">
      <el-form-item label="名称">
        <el-input v-model="btnUpdateData.label" placeholder="请输入名称"></el-input>
      </el-form-item>

      <el-form-item label="按钮事件">
        <el-input v-model="btnUpdateData.data.fun" type="textarea" :rows="getStrRow(btnUpdateData.data.fun)"
                  placeholder="请输入按钮事件"></el-input>
      </el-form-item>

      <el-form-item label="按钮描述">
        <el-input v-model="btnUpdateData.data.desc" type="textarea" :rows="2" placeholder="请输入按钮描述"></el-input>
      </el-form-item>

      <el-form-item label="按钮样式">
        <el-select v-model="btnUpdateData.btnCls" placeholder="请选择样式" value-key="label">
          <el-option v-for="item in btnClass" :value="item.value" :key="item.label"
                     :label="item.label"></el-option>
        </el-select>

        <el-tooltip :content="btnUpdateData.data.desc" open-delay="300" placement="bottom" effect="light"
                    hide-after="2000">
          <el-button :key="btnUpdateData.id" :type="btnUpdateData.btnCls" size="mini" plain>
            {{btnUpdateData.label}}
          </el-button>
        </el-tooltip>
      </el-form-item>

      <el-form-item label="是否显示">
        <el-radio-group v-model="btnUpdateData.display">
          <el-radio-button :label="true" :key="true">显示</el-radio-button>
          <el-radio-button :label="false" :key="false">隐藏</el-radio-button>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="复制结果">
        <el-radio-group v-model="btnUpdateData.data.copyOutputStr">
          <el-radio-button :label="true" :key="true">复制</el-radio-button>
          <el-radio-button :label="false" :key="false">不复制</el-radio-button>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="btnUpdateFlag = false">取 消</el-button>
      <el-button type="primary" @click="btnUpdateDo">确 定</el-button>
    </span>
  </el-dialog>

  <!-- 导入按钮设置数据 -->
  <el-dialog title="导入按钮设置数据" :visible.sync="uploadBtnConfigFlag" width="600px" top="40px" draggable>
    <el-upload class="upload-demo" drag action="https://test" accept=".json" :auto-upload="false" :limit="1"
               :on-exceed="handleExceed" ref="uploadInputOutputRef" :on-change="uploadChange">
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <div class="el-upload__tip" slot="tip">只能上传json文件，且不超过500kb</div>
    </el-upload>
    <span slot="footer" class="dialog-footer">
      <el-button @click="uploadBtnConfigFlag = false">取 消</el-button>
      <el-button type="primary" @click="uploadBtnConfig">确 定</el-button>
    </span>
  </el-dialog>

</div>
</body>
<script src="js/vue2.js"></script>
<script src="js/element.js"></script>
<script src="js/dataInit.js"></script>
<script src="js/methods.js"></script>
<script src="js/component.js"></script>
<script src="js/common.js"></script>
<script src="js/db-util.js"></script>
<script>
  Vue.component('json-input', jsonInput)
  new Vue({
    el: '#app',
    data: function () {
      return indexData
    },
    methods: methods,
    watch: {
      inputStr: function (newVal, oldVal) {
        setTimeout(() => this.updateLineNumbers(), 100);
      },
      outputStr: function (newVal, oldVal) {
        this.updateLineNumbersOut()
      },
      filterActionText(val) {
        this.$refs.treeActionSetting.filter(val);
      }
    },
    mounted() {
      // 示例：查询所有数据并打印
      (async () => {
        try {
          // 查询输入、结果所有数据
          const allData = await getAllData();
          this.saveData.push(...allData)
        } catch (error) {
          console.error("输入输出读取失败:", error);
        }

        try {
          const allData = await getConfigData();
          if (allData.length !== 0) {
            this.updateAction2ActionArr(allData)
            this.updateActionArr = allData
          }
        } catch (error) {
          console.error("读取页面配置:", error);
          this.hasConfig = false
        }
      })();
    }
  })
</script>
</html>
